import React,{useState} from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
import s from './style.module.less';
import {
  BillOutline,
  PieOutline,
  UserOutline,
} from 'antd-mobile-icons'
// import PropTypes from 'prop-types'

const Nav = ({ showNav }) => {
    const tabs = [
        {
            key: '',
            title: '账单',
            icon: <BillOutline />,
           
        },
        {
            key: 'data',
            title: '统计',
            icon: <PieOutline />,
            
        },
        {
            key: 'user',
            title: '我的',
            icon: <UserOutline />,
            
        },
        
    ];
  const [activeKey, setActiveKey] = useState('/');
  const navigateTo = useNavigate()

  const changeTab = (path) => {
    setActiveKey(path)
    navigateTo(path)
  }

  return (
    (showNav)&&(
      <TabBar activeKey={activeKey} onChange={changeTab}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    )
    
  );
};

// NavBar.propTypes = {
//   showNav: PropTypes.bool
// }

export default Nav;